<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS中的常用事件</title>
</head>
<body>
    <script type="text/javascript">
        /*
            JS中的事件：

                焦点:
                blur失去焦点
                focus获得焦点

                鼠标单双击
                click鼠标单击
                dblclick鼠标双击

                键盘
                keydown键盘按下
                keyup键盘弹起

                鼠标
                mousedown鼠标按下
                mouseover鼠标经过
                mousemove鼠标移动
                mouseout鼠标离开
                mouseup鼠标弹起

                表单相关
                reset表单重置
                submit表单提交

                单独记忆
                change下拉列表选中项改变，或文本框内容改变
                select文本被选定(复制时候的选中)
                load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）

            任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
            onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）
        */
        // 对于当前程序来说,sayHello函数被称为回调函数(callback函数)
        // 回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.
        // 回调函数是对两个角色说的, 一个是方法的实现者, 一个是方法的调用者
        // java, 中也有回调函数, 例如
        // public class MyClass {
        //
        //     public static void main(String[] args) {
        //         // 主动调用 run() 方法, 站在这个角度看 run() 方法
        //         // 这时 run() 方法叫做正向调用
        //         run();
        //     }
        //     // 站在 run() 方法的编写者角度来看这个方法, 把 run() 方法叫做回调函数
        //     public static void run() {
        //         ...
        //     }
        // }
        function sayHello() {
            alert("hello");
        }
    </script>

<!--    注册事件的第一种方式, 在标签中使用句柄-->
<!--    把函数注册在按钮上, 等待 click 事件发生之后, 等待这个函数被浏览器调用, 我们称这个函数为回调函数-->
    <input type="button" value="hello" onclick="sayHello()"/>

    <input type="button" value="hello2" id="myBut"/>
    <input type="button" value="hello3" id="but3">
    <input type="button" value="hello4" id="but4">
    <script type="text/javascript">
        function doSome() {
            alert("doSome");
        }
        // 第二种注册事件的方式, 是使用纯 JS 代码完成
        // 步骤:
        // 1. 先获取按钮对象
        // document , 文档对象, 是一个内置对象, 可以直接使用,
        // document 代表整个 HTML 页面
        // 而 window 是整个 窗口
        // getElementById 根据 ID 获取对象
        var btnObj = document.getElementById("myBut");
        // 2. 给按钮对象的 onclick 属性赋值
        // 这行代码的含义是 将 doSome 方法注册到 onclick 属性
        btnObj.onclick = doSome; // 注意千万别加小括号()

        // 注意, 下面的代码和第二种方式都是将函数绑定到一个属性上
        // 而不是直接执行函数, 只有当这个属性对应的事件触发了, 才会执行函数
        // 下面的函数是一个匿名函数
        var but3 = document.getElementById("but3");
        but3.onclick = function () {
            alert("测试");
        }

        document.getElementById("but4").onclick = function () {
            alert("看见我你就成功了");
        }
    </script>


</body>
</html>